<template>
	<!-- 这个是订单详情页面 -->
	<kb-layout title="年卡/次卡详情">

		<view class="bg-wite u-padding-25 u-margin-top-30">
			<view class="font-size14 u-flex u-flex-between">
				<view class="font-weight">
					<text class="font-size18">{{ticket_out.tag}}</text>
				</view>
				<view class="">
					<text>次数：</text>
					<text class="color-red font-weight">{{ticket_out.ticket_total_count}} </text>
				</view>
			</view>
			<view class="font-size14 u-flex u-flex-between u-margin-top-20">
				<view class="">
					<text>您的{{ticket_out.ticket_type_name}}{{ticket_out.tag}}</text>
				</view>
				<view class="u-flex" >
					<text>已用 {{ticket_out.use_count}} 次</text> 
				</view>
			</view>

			<!-- 去核销按钮 -->
			<view class="u-flex u-flex-between u-margin-top-40 u-flex-column">
				<view v-if="ticket_out.tag_id==1" class="">
					<u-button @click="showQRcord(ticket_out)" icon="grid" text="显示二维码" shape="circle" type="error"
						:plain="true"></u-button>
					<showQrcode v-if="showQrModal" v-model:modalShow="showQrModal" :qrcodeContent="ticket_out.qrcode_value"></showQrcode>

				</view>
				<!-- 激活操作 -->
				<view v-if="ticket_out.tag_id==4" class="">
					<u-button @click="reactiveTicketOut(ticket_out)" icon="edit-pen" text="激活卡" shape="circle" type="error"
						:plain="true"></u-button>
					 
				</view>
				<view class="u-margin-top-20">
					<view class="font-size14 color-gray text-center">
						<text>使用说明：</text>
						<text>景点凭此二维码作为门票凭证。</text>
					</view>
				</view>
			</view>
 
			<!-- 次卡年卡进入卡包 -->		

			<view v-if="order.ticket_type>1" class="remark u-padding-bottom-30 font-size14">
				<view class="line-border u-margin-top-40"> </view>
				<view   class="u-flex u-flex-between u-margin-top-40">
					<view class="">
						<text>次卡/年卡</text>
					</view>
					<view class="u-flex" @click="ee.jumpto('/pages/user/mycard')">
						<text class="color-gray">我的卡包</text><u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>

		</view>
		<!-- 费用明细弹出窗口 -->
		<view v-if="out_logs.length>=1" class="bg-wite  u-padding-25 u-margin-top-30">
			<view class="group-title u-flex u-flex-between">
				<view class="">
					<text class="vertical-line" :style="{backgroundColor:ee.bgColor.weight}"></text>
					<text class="color-main font-weight font-size16"> 使用记录 </text>
				</view>
				<view class=""> </view>
			</view>
			<view class="line-border u-margin-top-30"> </view>
			<view v-for="(info,index) in out_logs" :key="index"  
				class="u-flex u-flex-between u-margin-top-40">
				<view class="color-gray">
					<text>在 {{info.create_time}} 使用1次</text>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	 
		<view class="bg-wite  u-padding-25 u-margin-top-30">
			<view class="group-title u-flex u-flex-between">
				<view class="">
					<text class="vertical-line" :style="{backgroundColor:ee.bgColor.weight}"></text>
					<text class="color-main font-weight font-size16"> {{ticket.title}} </text>
				</view>
				<view class="">
					<text>{{detail.buy_num}}张</text>
				</view>
			</view>
			<view class="line-border u-margin-top-30"> </view>

			<view class="font-size14">
				<view class="u-flex u-flex-start align-center u-margin-top-30">
					<view class="field-label ">
						<text class="font-weight"> 编号SN：</text>
					</view>
					<view class="fvalue">
						<text>{{ticket_out.ticket_sn}}</text>
					</view>
				</view>
				<view class="u-flex u-flex-start align-center u-margin-top-30">
					<view class="field-label ">
						<text class="font-weight">出行日期：</text>
					</view>
					<view class="">
						<text>{{detail.select_day}} （首次）</text>
					</view>
				</view>
				<view class="u-flex u-flex-start align-center u-margin-top-30">
					<view class="field-label ">
						<text class="font-weight">项目：</text>
					</view>
					<view class="">
						<text>{{detail.good_title}}</text>
					</view>
				</view>
				<view class="u-flex u-flex-start align-center u-margin-top-30">
					<view class="field-label ">
						<text class="font-weight">目的地：</text>
					</view>
					<view class="">
						<text>{{ticket.address}}</text>
					</view>
				</view>
				<view class="u-flex u-flex-start align-center u-margin-top-30">
					<view class="field-label ">
						<text class="font-weight">出行人：</text>
					</view>
					<view class="fvalue">
						<view class="" v-for="(people,index) in peoples" :key="index">
							<view class="">
								<text>{{people.first_name}}</text> <text>{{people.name}}</text>
							</view>
							<view class="">
								<text>{{people.mobile}}</text>
							</view>
						</view>
					</view>
				</view>
				
				
			</view>

			<view class="line-border u-margin-top-40"> </view>

			<view class="remark u-padding-bottom-30 font-size14">
				<view v-for="(info,index) in ticket.remark_list" :key="index" @tap="showInfoDetail(info)"
					class="u-flex u-flex-between u-margin-top-40">
					<view class="color-gray">
						<text>{{info.title}}</text>
					</view>
					<view class="">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<popupSlot v-model:showDetails="showInfoPopup" :title="infoItem.title">
					<template #default>
						<view class="u-content u-padding-25 font-size14">
							<up-parse :tag-style="{ p: 'padding-bottom:30rpx; ' }"
								:content="infoItem.content"></up-parse>
						</view>
					</template>
				</popupSlot>

			</view>

		</view>
 

		 
		<kb-footer :color="ee.bgColor.weight"></kb-footer>
	</kb-layout>
</template>

<script setup>
	import popupSlot from '../mall/componets/popup-slot.vue';
	import showQrcode from '../mall/componets/show-qrcode.vue';
	import {
		ref,
		onMounted 
	} from 'vue';
	import {
		ticketOutDetails,
		qrcodeOrder,
		refundOrder,
		activeTicketOut
	} from "@/common/api.js";
import { func } from '../../uni_modules/uview-plus/libs/function/test';
 
	const showFeePopup = ref(false);
	const showInfoPopup = ref(false);
	const infoItem = ref({}); //弹出显示门票的文案
	const ticket = ref({});
	const order = ref({});
	const peoples = ref([]);
	const detail = ref({});
	const showQrModal = ref(false); //显示核销码
	const ticket_out = ref({});
	const out_logs = ref([]);
	 

	const props = defineProps({
		id: {
			type: [String, Number]
		}
	})

	onMounted(() => {
		fetchData()
	})

	function showInfoDetail(info) {
		infoItem.value = info;
		showInfoPopup.value = true;
	}

	function fetchData() {
		ticketOutDetails(props.id).then((ret) => {
			console.log(ret);
			ticket.value = ret.ticket;
			peoples.value = ret.peoples
			order.value = ret.order;
			detail.value = ret.detail;
			ticket_out.value = ret.ticket_out;
			out_logs.value = ret.out_log;
		})
	}

	function copyOrderNo(order_no) {
		uni.setClipboardData({
			data: order_no,
			success: () => uni.$u.toast('复制成功')
		})
	}

	function onShowPoup() {
		showFeePopup.value = !showFeePopup.value;
	}
	//关闭核销弹窗后从新获取订单数据

	//显示核销码
	function showQRcord(ticket_out) {
		 //console.log(order, showQrModal.value)
		showQrModal.value = !showQrModal.value;
		//检查核销逻辑是否正常
		 
		// qrcodeOrder(ticket_out.qrcode_value).then((ret)=>{
		// 	console.log(ret)
		// })
		 
	}
	//激活卡
	function reactiveTicketOut(ticket_out){
		uni.showModal({
			title: '提示',
			content: '激活后不能取消！您确定要激活吗？',
			success: function(res) {
				if (res.confirm) {
				  activeTicketOut(ticket_out.ticket_sn).then(ret => {
				  	fetchData();
				  })
				}  
			}
		})
		
	}
	//申请退款
	function onRefund(orderNo) {
		refundOrder(orderNo).then((ret) => {
			console.log('申请退款', ret)
		})
	}
</script>

<style lang="scss">
	.bg-wite {
		background-color: #fff;
	}

	.group-title {
		display: flex;
		align-items: center;
		margin-bottom: .9rem;
		margin-top: .9rem;
	}

	.vertical-line {
		content: '';
		display: inline-block;
		height: 15px;
		width: 4px;
		background-color: $u-primary;
		margin-right: 8px;
		border-radius: 4px;
	}

	.field-label {
		width: 30%;
		text-align: left;
	}

	.fvalue {
		width: 69.5%;
		text-align: left;
	}

	.copy {
		border: $u-border-color 1px solid;
		font-size: 11px;
		padding: 2px 5px;
		margin-left: 10px;
		border-radius: 5px;
	}
</style>